<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <section>
    <!-- 顺序很重要哟，涉及到图片的覆盖 -->
    <img src="./assets/bg.jpg" alt="bg" id="bg">
    <img src="./assets/moon.png" alt="moon" id="moon">
    <img src="./assets/mountain.png" alt="mountain" id="mountain">
    <img src="./assets/road.png" alt="road" id="road">
    <h2 id="text">Moon Light</h2>
  </section>
  <script>
    let bg = document.getElementById('bg');
    let moon = document.getElementById('moon');
    let mountain = document.getElementById('mountain');
    let road = document.getElementById('road');
    let text = document.getElementById('text');

    // 监听窗口滚动事件
    window.addEventListener('scroll', function () {
      // 获取窗口滚动长度
      var value = window.scrollY

      // console.log(value)
      // 修改各个图片的值使其产生一种运动感
      bg.style.top = value * 0.5 + 'px'
      moon.style.left = -value * 0.5 + 'px'
      mountain.style.top = -value * 0.15 + 'px'
      road.style.top = value * 0.15 + 'px'
      text.style.top = value * 1 + 'px'
    })
  </script>
</body>

</html>